<template>
	<view >
		<view  class="page">
			<view class="header">
				 <view class="search-header"> 
				 <view class="search-warp">
					 <view class="icon"></view>
					 	 <view class="search-text">输入商家名或菜品</view>
				 </view>
				 </view>
			</view>
			<view class="shop-main">
				<view class="shop-list" v-for="item in shops" :key="item.branch_shop_id">
					<view class="shop-wrap">
						<view class="image">
							<image :src="item.logo"></image>
						</view>
						<view class="shop-info">
							<view class="shop-name">{{item.branch_shop_name}}</view>
							<view class="distance">{{item.distance}}</view>
							<view class="address">{{item.address}}</view>
							<view class="pack-btn">自提</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex';
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
		  this.lng = 0;
	      this.lat = 0;
		  this.maxPage = 0;//总页数
		  this.curPage = 1;//当前页码
		},
		onShow(){
			// #ifdef MP-WEIXIN
			uni.getSetting({
				success: (res) => {
					//如果没有开启地理位置
					if(!res.authSetting['scope.userLocation']){
						uni.showModal({
							title:'开启获取地理位置',
							content:'请打开 "位置信息权限"，找到附近的店铺',
							success: (res) => {
								if(res.confirm){
									//调起客户端小程序设置页面
									uni.openSetting({
										success: (res2) => {
											//如果打开了地理位置
											if(res2.authSetting['scope.userLocation']){
												uni.getLocation({
													type:'gcj02',
													complete: (res) => {
														   this.lng = res.longitude;
														   this.lat = res.latitude;
														   console.log( res.latitude);
															console.log( res.longitude);
													   this.getShop({page:1,lng:this.lng,lat:this.lat});		
													}
												})
											}
										}
									})
								}else if(res.cancel){
									 console.log("取消")
								}
							}
						})
					}
				}
			})
			// #endif
		     uni.getLocation({
		     	type:'gcj02',
		     	complete: (res) => {
		     		   this.lng = res.longitude;
		     		   this.lat = res.latitude;
		     		   console.log( res.latitude);
		     			console.log( res.longitude);
		     	   this.getShop({page:1,lng:this.lng,lat:this.lat,success:(pageNum)=>{
					   console.log(pageNum);
					   this.maxPage = pageNum;
				   }});		
		     	}
		     })
			 
		},
		methods: {
			...mapActions({
				getShop:"business/getShop",
				getShopPage:"business/getShopPage"
			})
		},
		
		computed:{
			...mapState({
				isIpx:state=>state.system.isIpx,
				shops:state=>state.business.shops
			})
		},
		//下拉刷新
		onPullDownRefresh(){
			this.curPage = 1;
			this.getShop({page:1,lng:this.lng,lat:this.lat,complete:()=>{
				uni.stopPullDownRefresh();
					console.log("下拉完成");
				}
			});		
		},
		//上拉加载
		onReachBottom() {
			if(this.curPage<this.maxPage){
				this.curPage++;
				this.getShopPage({page:this.curPage,lng:this.lng,lat:this.lat
				});		
			}
			
		},
	    //分享小程序
		onShareAppMessage: (res) => {
			return{
				title:"点餐小程序",
				path:'/pages/main/main'
			}
		}
	}
</script>

<style>
	 .page{width: 100%;height:100%;overflow: hidden;}
	 .header{width: 100%;background-color: #eb1625;overflow: hidden;}
	 .header .search-header{width: 100%;padding-top: 20rpx;padding-bottom: 20rpx;display: flex;justify-content: center;align-items: flex-end;}
     .header .search-warp{width: 80%;height: 52rpx;background-color: rgba(255, 255, 255, 0.9);border-radius: 5px;display: flex;align-items: center;}
     .header .icon{width: 44rpx;height: 44rpx;background-image: url("@/static/images/main/search_icon.png");
	               background-repeat: no-repeat;background-position: center;background-size: 100%;margin: 0 20rpx;}
	 .header .search-text{color: #999999; font-size: 28rpx;}	
	 .shop-main{width: 100%;height: 100%;margin-top: 0rpx;}	
	 .shop-main .shop-list{width: 100%;border: 1px solid #efefef;box-sizing: border-box; padding: 20rpx 0;}	
     .shop-main .shop-list .shop-wrap{width: 92%;margin: 0 auto; display:flex;} 		
	 .shop-main .shop-list .shop-wrap .image{width: 160rpx;height: 160rpx;margin-right:20rpx;justify-content: center;}
	 .shop-main .shop-list .shop-wrap .image image{width: 100%;height: 100%;border-radius: 5px;}
	 .shop-info{width: 72%;}
	 .shop-name{width: 100%;height: 44rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 32rpx;font-weight: bold;}
	 .distance{font-size: 28rpx;margin-top: 10rpx;color: #666666;}
	 .address{font-size: 28rpx;margin-top: 10rpx;color: #666666;width: 100%;height: 44rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
	 .pack-btn{padding: 10rpx 20rpx; background-color: #eb1625; font-size: 28rpx;display: table;color: white;border-radius: 5px;
	  float: right;
	 }
</style>
